<!--支撑单位首页-->
<template>
	<div class="enterprise-dashboard">
		<div class="top-part">
			<div class="title">{{ realName }}</div>
			<div class="menu-list">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane v-for="(item, index) in menuList" :key="index" :label="item.label"
						:name="index + ''"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="right">
				<el-input type="text" v-model="unitName" placeholder="输入搜索关键词">
					<svg-icon slot="suffix" icon-class="search" class="search-icon" @click="gotoEnterprise(unitName)" />
				</el-input>
				<el-dropdown>
					<div class="user" style="cursor: pointer;">
						<img :src="avatar" alt />
						<span>{{ name }}</span>
					</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="logout">登出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
		<div class="img-part">
			<img src="../../assets/images/dashboard-img.png" alt />
			<div class="text-box">
				<div class="text">
					<span class="name">排名</span>
					<span class="num1">{{rankData.orderNum}}</span>
					<span class="name1">总得分</span>
					<span class="num1">{{rankData.finalScore}}</span>
					<el-tooltip placement="right" effect="light">
						<div slot="content">
							<div class="rule">
								<span class="label">计算规则：</span>
								<span class="content">（备案率*100+未出现通报率*100+任务完成率*100+评估率*100）*0.7+（备案企业数+任务完成数）*0.3-逾期数*10-投诉数*10</span>
							</div>
						</div>
						<svg-icon style="cursor: pointer;" class-name="dangerous-icon" icon-class="dangerous" />
					</el-tooltip>
					<span class="name1">投诉：</span>
					<span class="num1">{{rankData.complaintCount}}</span>
					
				</div>
				<!-- <div class="rule-text">计算规则:(企业备案率+任务完成率+未出现通报率+系统评估率)*1000-逾期率*1000</div> -->
				<span class="text" style="margin-top: 0.5rem;">
					<span class="name">纳管单位</span>
					<span class="num" @click="gotoEnterprise(false)" style="cursor: pointer;">{{ ngData }}</span>
					<!-- <svg-icon class-name="warning-icon" icon-class="warning" /> -->
					<span class="name1">企业备案率</span>
					<span class="num1">{{recordRate}}%</span>
					<span class="name1">未出现通报率</span>
					<span class="num1">{{rankData.notNotifyRate}}%</span>
				</span>
			</div>
		</div>
		<div class="content-part two">
			<div class="box left">
				<div class="title">日常工作情况概览</div>
				<div class="text-box">
					<div class="text-item">
						<div class="num">{{ teskData.total }}</div>
						<div class="name">任务总数</div>
					</div>
					<div class="shu"></div>
					<div class="text-item">
						<div class="num unit">{{ teskData.completeRate }}</div>
						<div class="name">任务完成率</div>
					</div>
					<div class="text-item">
						<div class="num">{{ teskData.adventCount }}</div>
						<div class="name">临期数</div>
					</div>
					<div class="text-item">
						<div class="num">{{ teskData.overdueCount }}</div>
						<div class="name">逾期数</div>
					</div>
				</div>
				
				<div class="heng"></div>
				
				<div class="extra-text-box">
					<div class="text-item">
						<span class="name">交互任务：</span>
						<span class="num">{{ teskData.typeOneCount }}</span>
					</div>
					<div class="text-item">
						<span class="name">通报任务：</span>
						<span class="num">{{ teskData.typeTwoCount }}</span>
					</div>
					<div class="text-item">
						<span class="name">专项任务：</span>
						<span class="num">{{ teskData.typeThreeCount }}</span>
					</div>
				</div>
			</div>
			<div class="box right">
				<div class="title">资产备案情况</div>
				<div class="num-list">
					<div class="num-item" v-for="(item, index) in propertyList" :key="index">
						<div class="icon-box">
							<svg-icon class-name="svg-icon" :icon-class="item.iconClass" />
							<div class="right">
								<div class="name">{{ item.name }}</div>
								<div class="num" @click="gotoProperty(item.path)">{{ item.total }}</div>
							</div>
						</div>
						<div class="num-box">
							<span class="name">备案率：</span>
							<span class="num unit"
								@click="gotoProperty(item.hasPoliceOrgCodePath)">{{ item.recordRate }}</span>
						</div>
					</div>
				</div>
				<div class="heng"></div>
				<div class="text-box">
					<div class="sp-item">
						<svg-icon class-name="svg-icon" icon-class="xinxixitong" />
						<div class="right">
							<div class="name">信息系统</div>
							<div class="num" style="cursor: pointer;" @click="gotoProperty('/property/index?tabName=2')">{{ systemData.total }}
							</div>
						</div>
					</div>
					<div class="text-item">
						<div class="it">
							<span class="name">一级数：</span>
							<span class="num">{{ systemData.firstLevelCount }}</span>
						</div>
						<div class="it">
							<span class="name">备案率：</span>
							<span class="num unit">{{ systemData.recordRate }}</span>
						</div>
					</div>
					<div class="text-item">
						<div class="it">
							<span class="name">二级数：</span>
							<span class="num">{{ systemData.secondLevelCount }}</span>
						</div>
						<div class="it">
							<span class="name">测评率：</span>
							<span class="num unit">{{ systemData.testRate }}</span>
						</div>
					</div>
					<div class="text-item">
						<div class="it">
							<span class="name">三级数：</span>
							<span class="num">{{ systemData.thirdLevelCount }}</span>
						</div>
						<div class="it">
							<span class="name">评估率：</span>
							<span class="num unit">{{ systemData.evalRate }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<unitDialog v-model="unitDialogShow" :row="row" />
	</div>
</template>

<script>
	import {
		getDomainStat,
		getAppStat,
		getAppletStat,
		getSystemStat,
		getEnterpriseRecordStat,
		getCheckTaskStat,
		getSupportUnitSelfRanking,
		simpleSearchEnterprise
	} from "@/api/dashboard/index";
	import unitDialog from './component/unitDialog.vue';
	export default {
		components: {
			unitDialog
		},
		data() {
			return {
				activeName: "",
				unitName: "",
				unitDialogShow: false,
				row: null,
				ngData: 0, // 纳管单位
				recordRate: 0, // 备案率
				teskData: {
					total: 0,
					completeRate: 0,
					adventCount: 0,
					overdueCount: 0,
					typeOneCount: 0,
					typeTwoCount: 0,
					typeThreeCount: 0
				}, // 日常工作情况概览数据
				systemData: {
					total: 0,
					firstLevelCount: 0,
					secondLevelCount: 0,
					thirdLevelCount: 0,
					recordRate: 0,
					testRate: 0,
					evalRate: 0
				}, // 信息系统数据
				propertyList: [{
						total: 69,
						recordRate: 69,
						iconClass: "yuming",
						name: "域名",
						path: "/property/index?tabName=1",
						hasPoliceOrgCodePath: "/property/index?tabName=1&hasPoliceOrgCode=1"
					},
					{
						total: 0,
						recordRate: 0,
						iconClass: "app",
						name: "APP",
						path: "/property/index?tabName=4",
						hasPoliceOrgCodePath: "/property/index?tabName=4&hasPoliceOrgCode=1"
					},
					{
						total: 0,
						recordRate: 0,
						iconClass: "xiaochengxu",
						name: "小程序",
						path: "/property/index?tabName=5",
						hasPoliceOrgCodePath: "/property/index?tabName=5&hasPoliceOrgCode=1"
					}
				],
				rankData: {
					orderNum: 4,
					notNotifyRate: '12%',
					finalScore: 800,
					complaintCount: 0,
				}
			};
		},

		computed: {
			name() {
				return this.$store.getters.name;
			},
			realName() {
				return this.$store.getters.realName;
			},
			avatar() {
				return this.$store.getters.avatar;
			},
			menuList() {
				let list = [{
						label: "域名",
						path: "/property/index?tabName=1"
					},
					{
						label: "APP",
						path: "/property/index?tabName=4"
					},
					{
						label: "小程序",
						path: "/property/index?tabName=5"
					},
					{
						label: "信息系统",
						path: "/property/index?tabName=2"
					}
				];
				return list;
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.getDomainStat();
				this.getAppStat();
				this.getAppletStat();
				this.getSystemStat();
				this.getEnterpriseRecordStat();
				this.getCheckTaskStat();
				this.getSupportUnitSelfRanking();
			},
			// 域名数据
			getDomainStat() {
				getDomainStat({}).then(res => {
					const rate = Math.round(res.data.recordRate * 100);
					this.$set(this.propertyList[0], "total", res.data.total);
					this.$set(this.propertyList[0], "recordRate", rate);
				});
			},
			// APP数据
			getAppStat() {
				getAppStat({}).then(res => {
					const rate = Math.round(res.data.recordRate * 100);
					this.$set(this.propertyList[1], "total", res.data.total);
					this.$set(this.propertyList[1], "recordRate", rate);
				});
			},
			// 小程序数据
			getAppletStat() {
				getAppletStat({}).then(res => {
					const rate = Math.round(res.data.recordRate * 100);
					this.$set(this.propertyList[2], "total", res.data.total);
					this.$set(this.propertyList[2], "recordRate", rate);
				});
			},
			// 信息系统数据
			getSystemStat() {
				getSystemStat({}).then(res => {
					this.systemData = {
						...res.data,
						recordRate: Math.round(res.data.recordRate * 100),
						testRate: Math.round(res.data.testRate * 100),
						evalRate: Math.round(res.data.evalRate * 100)
					};
				});
			},
			// 首页-企业备案统计
			getEnterpriseRecordStat() {
				getEnterpriseRecordStat({}).then(res => {
					this.ngData = res.data.total;
					this.recordRate = Math.round(res.data.recordRate * 100);
				});
			},
			// 任务概览数据
			getCheckTaskStat() {
				getCheckTaskStat({}).then(res => {
					this.teskData = {
						...res.data,
						completeRate: res.data.completeRate * 100
					};
				});
			},
			
			// 排名，总得分，未出现通报率数据
			getSupportUnitSelfRanking() {
				getSupportUnitSelfRanking({}).then(res => {
					this.rankData = res.data;
					this.rankData.notNotifyRate = Math.round(res.data.notNotifyRate * 100);
				});
			},
			
			handleClick(tab, event) {
				const row = this.menuList[this.activeName];
				if (row.path) {
					this.$router.push({
						path: row.path
					});
				}
			},
			gotoProperty(path) {
				if (path) {
					this.$router.push({
						path
					});
				}
			},
			async gotoEnterprise(unitName) {
				let path = "";
				if (unitName) {
					const res = await simpleSearchEnterprise({ unitName })
					if (res.data && res.data.length > 0) {
						this.row = res.data[0]
						if (this.row.isOwn) {
							path = "/enterprise/index?unitName=" + unitName;
							this.$router.push({
								path
							});
						}else {
							this.unitDialogShow = true;
						}
					}else{
						this.$message.warning("未找到该企业");
					}
				}else {
					path = "/enterprise/index";
					this.$router.push({
						path
					});
				}
			},
			async logout() {
				this.$confirm("确定退出系统吗？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						this.$store.dispatch("LogOut").then(() => {
							location.href = "/login";
						});
					})
					.catch(() => {});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.enterprise-dashboard {
		padding: 0.38rem 1.38rem 0;

		.top-part {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 0.89rem;

			.title {
				font-size: 0.53rem;
			}

			.menu-list {
				::v-deep {
					.el-tabs__header {
						margin-bottom: 0;
					}

					.el-tabs__active-bar {
						background: transparent;
					}

					.el-tabs__nav-wrap::after {
						display: none;
					}

					.el-tabs__item {
						color: rgba(0, 8, 34, 0.6);
						font-size: 0.3rem;
						// &.is-active {
						//   color: #000822;
						// }
					}
				}
			}

			.right {
				display: flex;

				.el-input {
					width: 3.48rem;
					height: 0.6rem;
					font-size: 0.23rem;

					::v-deep .el-input__inner {
						height: 0.6rem;
					}

					.search-icon {
						height: 0.6rem;
						font-size: 0.25rem;
						margin-right: 0.25rem;
					}
				}

				.user {
					display: flex;
					align-items: center;
					margin-left: 0.14rem;
					width: 1.5rem;
					height: 0.6rem;
					background: rgba(255, 255, 255, 0.6);
					box-shadow: 0px 0.07rem 1.2rem 0.6rem rgba(0, 0, 0, 0.05);
					border-radius: 0.04rem;
					font-size: 0.23rem;
					color: #000822;
					padding-left: 0.1rem;
					box-sizing: border-box;

					img {
						width: 0.45rem;
						height: 0.45rem;
						border-radius: 0.07rem;
						margin-right: 0.11rem;
					}
				}
			}
		}

		.img-part {
			padding-left: 1.25rem;
			margin-bottom: -0.6rem;
			display: flex;

			img {
				width: 4rem;
				height: 4rem;
			}

			.text-box {
				height: 4rem;
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
				margin-left: 0.3rem;
				margin-top: 0.75rem;
				
				.dangerous-icon {
					font-size: 0.35rem;
					margin-bottom: 0.3rem;
				}
			}

			.text {
				.name {
					font-size: 0.4rem;
					color: #000822;
					margin-right: 0.45rem;
				}

				.num {
					font-size: 0.9rem;
					color: #000822;
					margin-right: 0.15rem;
				}

				.warning-icon {
					font-size: 0.45rem;
				}

				.name1 {
					font-size: 0.4rem;
					color: #000822;
					margin: 0 0.3rem 0 1.2rem;
				}

				.num1 {
					font-size: 0.75rem;
					color: #000822;
				}
				
				::v-deep .rule {
					font-size: .25rem;
					color: #000822;
					// display: flex;
					// .content {
					// 	width: 1.5rem;
					// }
				}
			}
			.rule-text {
				font-size: .25rem;
				color: #000822;
			}
		}

		.content-part {
			display: flex;
			justify-content: space-between;

			&.two {
				height: 5.38rem;

				.box.left {
					width: calc(50% - 0.15rem);

					.text-box {
						padding: 0 0.05rem;
						display: flex;
						justify-content: space-between;
						align-items: center;
						text-align: center;
						// margin: 0.59rem 0;
						margin-top: 1.07rem;

						.shu {
							width: 0.8px;
							height: 0.9rem;
							background: rgba(0, 8, 34, 0.3);
						}

						.text-item {
							width: 1.31rem;

							&:first-child {
								margin-right: 0.31rem;
							}

							.num {
								font-size: 0.45rem;
								color: #000822;

								&.unit::after {
									content: "%";
									font-size: 0.3rem;
								}
							}

							.name {
								margin-top: 0.17rem;
								font-size: 0.26rem;
								color: rgba(0, 8, 34, 0.8);
							}
						}
					}
					
					.heng {
						width: 100%;
						height: 0.03rem;
						background: rgba(0, 8, 34, 0.3);
						margin: 0.41rem 0 0.46rem;
					}

					.extra-text-box {
						padding: 0 0.17rem;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.text-item {
							font-size: 0.26rem;
							color: rgba(0, 8, 34, 0.6);

							.num {
								font-size: 0.3rem;
								color: #000822;
							}
						}
					}
				}

				.box.right {
					width: calc(50% - 0.15rem);

					.num-list {
						margin-top: 0.63rem;
						padding: 0 0.19rem;
						display: flex;
						justify-content: space-between;

						.num-item {
							width: 1.73rem;

							.icon-box {
								width: 100%;
								display: flex;
								justify-content: space-between;
								margin-bottom: 0.3rem;

								.svg-icon {
									font-size: 0.45rem;
									// margin-top: .15rem;
								}

								.right {
									font-size: 0.26rem;
									color: rgba(0, 8, 34, 0.8);
									text-align: right;

									.num {
										font-size: 0.38rem;
										color: #000822;
										margin-top: 0.07rem;
										cursor: pointer;
									}
								}
							}

							.num-box {
								width: 100%;
								display: flex;
								justify-content: space-between;
								font-size: 0.23rem;
								color: rgba(0, 8, 34, 0.6);
								margin-top: 0.11rem;

								.name {
									width: 1.11rem;
								}

								.num {
									cursor: pointer;
									font-size: 0.26rem;
									color: #000822;

									&.unit::after {
										content: "%";
										font-size: 0.19rem;
									}
								}
							}
						}
					}

					.heng {
						width: 100%;
						height: 0.03rem;
						background: rgba(0, 8, 34, 0.3);
						margin: 0.41rem 0 0.46rem;
					}

					.text-box {
						padding: 0 0.19rem;
						display: flex;
						justify-content: space-between;

						.sp-item {
							width: 1.73rem;
							display: flex;
							justify-content: space-between;

							.svg-icon {
								font-size: 0.45rem;
								// margin-top: .15rem;
							}

							.right {
								font-size: 0.26rem;
								color: rgba(0, 8, 34, 0.8);
								text-align: right;

								.num {
									font-size: 0.38rem;
									color: #000822;
									margin-top: 0.07rem;
								}
							}
						}

						.text-item {
							.it {
								&:first-child {
									margin-bottom: 0.21rem;
								}
							}

							font-size: 0.26rem;
							color: rgba(0, 8, 34, 0.6);

							.num {
								color: #000822;

								&.unit::after {
									content: "%";
									font-size: 0.19rem;
								}
							}
						}
					}
				}
			}

			.box {
				padding: 0.45rem 0.38rem;
				background: #fff;
				border-radius: 0.07rem;
				box-shadow: 0px 0.07rem 1.2rem 0.6rem rgba(0, 0, 0, 0.05);

				.title {
					font-size: 0.38rem;
					color: #000822;
					display: flex;
					align-items: center;

					&::before {
						content: "";
						display: block;
						width: 0.04rem;
						height: 0.3rem;
						background: #1c4088;
						margin-right: 0.15rem;
					}
				}
			}
		}
	}
</style>